<template>
	<view class="main">
		<view class="imgebox" v-for="item in job.shop.img">
			<image :src="item" mode="aspectFill"></image>
		</view>
		<view class="titlebox">
			<view class="first-title">
				<text class="left">{{job.title}}</text>
				<text class="right">{{job.amount}}元/月</text>
			</view>
			<view class="second-title">
				<text v-for="item in job.tag">{{item}}</text>
			</view>
		
		</view>
		<view class="detailList">

			<view class="detailList-title">职位详情</view>
			
			<view class="detailList-item">类型: {{job.work.workname}}</view>
			<view class="detailList-item">人数: {{job.num}}</view>
			<view class="detailList-item">要求: {{job.require}}</view>
			
			<view class="detailList-item">描述: {{job.mark}}</view>
			
		</view>
		
		<view class="detailList">
		
			<view class="detailList-title">店铺信息</view>
			<view class="detailList-item">{{job.shop.merchantName}}</view>
			<view class="detailList-item">{{job.shop.cityName}}{{job.shop.areaName}}{{job.shop.address}}</view>
			
		</view>
		<view class="fiexd-btn" @click="join">
			<button>投递</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				job: {}
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.jobInfo();
		},

		onShow() {},
		methods: {


			join() {

				let param = {
					id: this.id,
				}
				let that = this;
				this.$api.join(param).then(res => {

					if (res.code == 1) {
						that.$util.$showToast("投递成功", '', 'none');
						uni.navigateBack({
							delta: 1
						})
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
					console.info(res)
				})
			},

			jobInfo() {
				let param = {
					id: this.id
				}
				let that = this;
				this.$api.job(param).then(res => {

					if (res.code == 1) {
						that.job = res.data;
					}
					console.info(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.main{
		padding-bottom: 220rpx;
	}
	.imgebox {
		width: 100%;
		height: 370rpx;

		image {
			width: 100%;
			height: 370rpx;
		}
	}

	.titlebox {
		border-bottom: 1rpx solid #EBEBEB;
		margin: 42rpx 40rpx;
		height: 151rpx;

		.first-title {
			display: flex;

			.left {
				flex: auto;
				font-size: 34rpx;
				color: #333333;
			}

			.right {
				font-size: 30rpx;
				color: #12ADA9;
			}
		}

		.second-title {
			margin-top: 20rpx;

			text {
				font-size: 22rpx;
				color: #666666;
				padding: 13rpx;
				background: #F5F5F5;
				border-radius: 5rpx;
				margin-right: 20rpx;
			}
		}
	}

	.detailList {
		padding: 0 46rpx;

		.detailList-title {
			font-size: 28rpx;
			color: #333333;
			padding-bottom: 20rpx;
		}

		.detailList-item {
			font-size: 24rpx;
			color: #666666;
			line-height: 48rpx;
		}
	}
</style>
